<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="(item, idx) in tablecClumn"
        :key="idx"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :min-width="100"
      >
        <template slot-scope="scope">
          <!-- scope.row: 当前一行的数据 -->
          <span>
            {{
              item.prop === "status"
                ? analysisStatus(scope.row.status)
                : scope.row[item.prop]
            }}
          </span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteItem(scope.row)"
            >删除</el-button
          >
          <el-button size="mini" type="success" @click="editItem(scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="primary">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
     background
      layout="prev, pager, next" 
      :total="page.total" 
      @current-change="currentChange"
      >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    tablecClumn: {
      type: Array,
      default: () => [],
    },
    page: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    deleteItem(row) {
      this.$emit("deleteItem", row.id);
    },
    editItem(row) {
      this.$emit("editItem", row);
    },
    analysisStatus(bool) {
      return bool ? "开盘" : "未开盘";
    },
    currentChange(e) {
      this.$emit('currentChange', e)
      console.log(e)
    }
  },
};
</script>